最近玩csdn比较少，欢迎关注我的掘金：杨灿就是杨火山

简单快速上手ts的学习路径：
一、熟悉掌握熟悉的强类型定义，初步学习编写强类型代码。

学习ts的声明变量类型，能够初步编写强类型代码；
学习ts的接口,进一步强定义对象的丰富属性；
学习ts的函数声明和实现定义，强类型化你的js函数；

二、灵活面对类型转换，类型报错，类型文件的声明和引入，灵活编写强类型代码。

学习ts的类型断言（解释型类型转换）；
学习ts的泛型，更灵活的面对多可能性类型参数；
学习ts的类型声明文件，全局定义；

ts在线运行练习网站：https://www.tslang.cn/play/index.html

一、ts简介
1.什么是TypeScript(TS)？
TypeScript简称TS

TS和JS之间的关系其实就是Less/Sass和CSS之间的关系

就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展

就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS
2.为什么需要TypeScript?
因为JavaScript是弱类型, 很多错误只有在运行时才会被发现

而TypeScript是强类型, 它提供了一套静态检测机制,如何我们编码事中途变换变量的类型，ts就会在报错，帮助我们在编码时发现错误。

Ts为帮助js弥补在大型项目中的缺陷而生。

3.TypeScript特点

支持最新的JavaScript新特特性
支持代码静态检查
支持诸如C,C++,Java,Go等后端语言中的特性

(枚举、泛型、类型转换、命名空间、声明文件、类、接口等)

二、ts中的类型声明
TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型、元祖方便我们使用
1.boolean、number、string简单类型的变量声明
布尔类型 boolean
let val2:boolean;
val2 = true;
// val2 = 1; // 会报错
console.log(val2);

数值类型 number
let val1:number; // 定义了一个名称叫做val1的变量, 这个变量中将来只能存储数值类型的数据
val1 = 123;
// val1 = "123"; // 会报错
// 注意点: 其它的用法和JS一样
// val1 = 0x11;
// val1 = 0o11;
// val1 = 0b11;
console.log(val1);

字符串类型 string
let val3:string;
val3 = "123";
val3 = `val1=${val1}, val2==${val2}`;
console.log(val3);

2.数组和元祖类型的变量声明
(1)整个数组数据类型一致的情况
方式一: Array < number >
// 需求: 要求定义一个数组, 这个数组中将来只能存储数值类型的数据
let arr1:Array<number>; // 表示定义了一个名称叫做arr1的数组, 这个数组中将来只能够存储数值类型的数据
arr1 = [1, 3, 5];
// arr1 = ['a', 3, 5]; // 报错
console.log(arr1);

方式二: string[ ] （建议）
// 需求: 要求定义一个数组, 这个数组中将来只能存储字符串类型的数据
let arr2:string[]; // 表示定义了一个名称叫做arr2的数组, 这个数组中将来只能够存储字符串类型的数据
arr2 = ['a', 'b', 'c'];
// arr2 = [1, 'b', 'c']; // 报错
console.log(arr2);

(2)整个数组数据类型不一致的情况
联合类型声明数组 (number | string)[ ]
let arr3:(number | string)[];
// 表示定义了一个名称叫做arr3的数组, 这个数组中将来既可以存储数值类型的数据, 也可以存储字符串类型的数据
arr3 = [1, 'b', 2, 'c'];
// arr3 = [1, 'b', 2, 'c', false]; // 报错
console.log(arr3);

(3) 自由任意类型元素的数组
any[ ]
let arr4:any[]; // 表示定义了一个名称叫做arr4的数组, 这个数组中将来可以存储任意类型的数据
arr4 = [1, 'b', false];
console.log(arr4);

(4) 严格限制类型和长度的元祖数组
元祖类型 [string, number, boolean]

TS中的元祖类型其实就是数组类型的扩展,元祖用于保存定长定数据类型的数据

let arr5:[string, number, boolean]; 

// 表示定义了一个名称叫做arr5的元祖, 这个元祖中将来可以存储3个元素, 第一个元素必须是字符串类型, 第二个元素必须是数字类型, 第三个元素必须是布尔类型

arr5 = ['a', 1, true];
// arr5 = ['a', 1, true, false]; // 超过指定的长度会报错
arr5 = ['a', 1, true];
console.log(arr5);

3.enum枚举类型

枚举用于表示固定的几个取值,例如: 一年只有四季、人的性别只能是男或者女。

枚举类型是TS为JS扩展的一种类型, 在原生的JS中是没有枚举类型的。

定义：

enum Gender{
    Male=0,
    Femal=1
}

// 简写
enum Gender{
    Male,
    Femal
}

// 定义了一个名称叫做Gender的枚举类型, 这个枚举类型的取值有两个, 分别是Male和Femal

使用：
let val:Gender; 
// 定义了一个名称叫做val的变量, 这个变量中只能保存Male或者Femal
val = Gender.Male;
val = Gender.Femal;
// val = 'nan'; // 报错
// val  = false;// 报错


// 注意点: TS中的枚举底层实现的本质其实就是数值类型, 所以赋值一个数值不会报错
// val = 666; // 不会报错
// console.log(Gender.Male); // 0
// console.log(Gender.Femal);// 1


// 注意点: TS中的枚举类型的取值, 默认是从上至下从0开始递增的
//         虽然默认是从0开始递增的, 但是我们也可以手动的指定枚举的取值的值
// 注意点: 如果手动指定了前面枚举值的取值, 那么后面枚举值的取值会根据前面的值来递增
// console.log(Gender.Male); // 6
// console.log(Gender.Femal);// 7

// 注意点: 如果手动指定了后面枚举值的取值, 那么前面枚举值的取值不会受到影响
// console.log(Gender.Male); // 0
// console.log(Gender.Femal);// 6

// 注意点: 我们还可以同时修改多个枚举值的取值, 如果同时修改了多个, 那么修改的是什么最后就是什么
// console.log(Gender.Male); // 8
// console.log(Gender.Femal);// 6


// 我们可以通过枚举值拿到它对应的数据
console.log(Gender.Male); // 0
// 我们还可以通过它对应的数据拿到它的枚举值
console.log(Gender[0]); // Male

探究底层实现原理
var Gender;
(function (Gender) {
 // Gender[key] = value;
    Gender[Gender["Male"] = 0] = "Male";
    Gender[Gender["Femal"] = 1] = "Femal";
})(Gender || (Gender = {}));

// Gender[Gender["Male"] = 0] = "Male" 相当于 Gender["Male"] = 0;Gender[0] = "Male";

let Gender = {};
Gender["Male"] = 0;
Gender[0] = "Male";
Gender["Femal"] = 1;
Gender[1] = "Femal";

4.any 任意类型
any表示任意类型, 当我们不清楚某个值的具体类型的时候我们就可以使用any，任何数据类型的值都可以赋值给any类型
一般用于定义一些通用性比较强的变量, 或者用于保存从其它框架中获取的不确定类型的值

注意不要过多使用any，因为什么都是any那ts就变成js了

let value:any; // 定义了一个可以保存任意类型数据的变量
value = 123;
value = "abc";
value = true;
value = [1, 3, 5];

5.void类型
void与any正好相反, 表示没有任何类型, 一般用于函数返回值。在TS中只有null和undefined可以赋值给void类型
function test():void {
    console.log("hello world");
}
test();

let value:void; // 定义了一个不可以保存任意类型数据的变量, 只能保存null和undefined
// value = 123; // 报错
// value = "abc";// 报错
// value = true;// 报错
// 注意点: null和undefined是所有类型的子类型, 所以我们可以将null和undefined赋值给任意类型
// value = null; // 不会报错
value = undefined;// 不会报错

6.never类型
表示的是那些永不存在的值的类型,一般用于抛出异常或根本不可能有返回值的函数。
// function demo():never {
//     throw new Error('报错了');
// }
// demo();

// function demo2():never {
//     while (true){}
// }
// demo2();

7.Object对象类型
let obj:object; // 定义了一个只能保存对象的变量
// obj = 1;
// obj = "123";
// obj = true;
obj = {name:'lnj', age:33};
console.log(obj);


如何表示一个具体的对象数据结构呢？

答案：可以使用ts的接口,在后续文章中会详细介绍。

8. 接口interface类型
（1）什么是接口类型?

和number,string,boolean,enum这些数据类型一样,接口也是一种类型, 也是用来约束使用者的。

（2）定义和使用
// 需求: 要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符

interface FullName{
    firstName:string
    lastName:string
}

let obj = {
    firstName:'Jonathan',
    lastName:'Lee'
    // lastName:18 会报错
};

//{firstName, lastName}使用了解构赋值
function say({firstName, lastName}:FullName):void {
    console.log(`我的姓名是:${firstName}_${lastName}`);
}
say(obj);


ts入门笔记目录：
TS入门笔记1——TS的类型声明
TS入门笔记2——TS接口进阶详解
TS入门笔记3——TS中的函数声明
TS入门笔记4——TS的类型断言（解释型类型转换）
TS入门笔记5——TS的泛型
TS入门笔记6——ts中的声明文件、模块、命名空间


记录知识，传递快乐~
如果我的总结对你有帮助，请给我点个赞，你的鼓励是我持续记录的一大动力~
如果文章中有错误，请多包涵，欢迎在评论中指出~

ts类型声明文件的正确使用姿势
ts声明文件类型
DefinitelyTyped社区已定义
  npm install @types/jquery --save-dev

与npm一同发布
解释： package.json 中有 types 字段，或者有一个 index.d.ts 声明文件
自给自足型

创建一个 node_modules/@types/foo/index.d.ts 文件，存放 foo 模块的声明文件。不太建议用这种方案，一般只用作临时测试。
创建一个 types 目录，专门用来管理自己写的声明文件，将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。



  /path/to/project
    ├── src
    |  └── index.ts
    ├── types
    |  └── foo
    |     └── index.d.ts
    └── tsconfig.json

  {
    "compilerOptions": {
        "module": "commonjs",
        "baseUrl": "./",
        "paths": {
            "*": ["types/*"]
        }
    }
}


ts声明文件书写姿势
全局型
# let 
declare let jQuery: (selector: string) => any;

# function 
declare function jQuery(selector: string): any;

#class 
declare class Animal {
    name: string;
    constructor(name: string);
    sayHi(): string;
}

#enum
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

#namespace 
declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
    namespace fn {
        function extend(object: any): void;
    }
}

npm包型 - export
// types/foo/index.d.ts
export const name: string;
export function getName(): string;
export class Animal {
    constructor(name: string);
    sayHi(): string;
}
export enum Directions {
    Up,
    Down,
    Left,
    Right
}
export interface Options {
    data: any;
}
export namespace foo {
    const name: string;
    namespace bar {
        function baz(): string;
    }
}

npm包型 - export default
// types/foo/index.d.ts
# function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出
export default function foo(): string;

export default Directions;
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}


npm包型 - 先声明，在export
// types/foo/index.d.ts
declare const name: string;
declare function getName(): string;
declare class Animal {
    constructor(name: string);
    sayHi(): string;
}
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
#interface 前是不需要 declare
interface Options {
    data: any;
}

export { name, getName, Animal, Directions, Options };


module 拓展
// types/foo-bar.d.ts

declare module 'foo' {
    export interface Foo {
        foo: string;
    }
}

declare module 'bar' {
    export function bar(): string;
}

// src/index.ts

import { Foo } from 'foo';
import * as bar from 'bar';

let f: Foo;
bar.bar();


三斜线指令

书写一个全局变量的声明文件
依赖一个全局变量的声明文件



// types/jquery-plugin/index.d.ts

/// <reference types="jquery" />

declare function foo(options: JQuery.AjaxSettings): string;


ts文件tsc自动生成声明文件

命令行参数



--declaration（简写 -d）



tsconfig.json



{
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "lib",
        "declaration": true,
    }
}


ts发布

发布到社区



  @types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下，就需要给 DefinitelyTyped 创建一个 pull-request，其中包含了类型声明文件，测试代码，以及 tsconfig.json 等。



与源码一起（依次查找*.d.ts）

1. 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址
2. 在项目根目录下，编写一个 index.d.ts 文件
3. 针对入口文件（package.json 中的 main 字段指定的入口文件），编写一个同名不同后缀的 .d.ts 文件





参考

declaration-files



欢迎关注我们【前端漫漫】，了解最新文章动态联系邮箱：simple2012hcz@126.com

ts类型声明文件的正确使用姿势
ts声明文件类型
npm install @types/jquery --save-dev
与npm一同发布
解释： package.json 中有 types 字段，或者有一个 index.d.ts 声明文件
自给自足型
创建一个 node_modules/@types/foo/index.d.ts 文件，存放 foo 模块的声明文件。不太建议用这种方案，一般只用作临时测试。
创建一个 types 目录，专门用来管理自己写的声明文件，将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。
/path/to/project
├── src
|  └── index.ts
├── types
|  └── foo
|     └── index.d.ts
└── tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "./",
"paths": {
"*": ["types/*"]
}
}
}
ts声明文件书写姿势
全局型
# let
declare let jQuery: (selector: string) => any;
# function
declare function jQuery(selector: string): any;
#class
declare class Animal {
name: string;
constructor(name: string);
sayHi(): string;
}
#enum
declare enum Directions {
Up,
Down,
Left,
Right
}
#namespace
declare namespace jQuery {
function ajax(url: string, settings?: any): void;
namespace fn {
function extend(object: any): void;
}
}
npm包型 - export
// types/foo/index.d.ts
export const name: string;
export function getName(): string;
export class Animal {
constructor(name: string);
sayHi(): string;
}
export enum Directions {
Up,
Down,
Left,
Right
}
export interface Options {
data: any;
}
export namespace foo {
const name: string;
namespace bar {
function baz(): string;
}
}
npm包型 - export default
// types/foo/index.d.ts
# function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出
export default function foo(): string;
export default Directions;
declare enum Directions {
Up,
Down,
Left,
Right
}
npm包型 - 先声明，在export
// types/foo/index.d.ts
declare const name: string;
declare function getName(): string;
declare class Animal {
constructor(name: string);
sayHi(): string;
}
declare enum Directions {
Up,
Down,
Left,
Right
}
#interface 前是不需要 declare
interface Options {
data: any;
}
export { name, getName, Animal, Directions, Options };
module 拓展
// types/foo-bar.d.ts
declare module 'foo' {
export interface Foo {
foo: string;
}
}
declare module 'bar' {
export function bar(): string;
}
// src/index.ts
import { Foo } from 'foo';
import * as bar from 'bar';
let f: Foo;
bar.bar();
三斜线指令
书写一个全局变量的声明文件
依赖一个全局变量的声明文件
// types/jquery-plugin/index.d.ts
/// 
declare function foo(options: JQuery.AjaxSettings): string;
ts文件tsc自动生成声明文件
命令行参数
--declaration(简写 -d)
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"outDir": "lib",
"declaration": true,
}
}
ts发布
发布到社区
@types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下，就需要给 DefinitelyTyped 创建一个 pull-request，其中包含了类型声明文件，测试代码，以及 tsconfig.json 等。
与源码一起(依次查找*.d.ts)1. 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址
2. 在项目根目录下，编写一个 index.d.ts 文件
3. 针对入口文件(package.json 中的 main 字段指定的入口文件)，编写一个同名不同后缀的 .d.ts 文件
参考
欢迎关注我们【前端漫漫】，了解最新文章动态！联系邮箱：simple2012hcz@126.com

ts声明文件类型
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types已定义
  npm install @types/jquery --save-dev
与npm一同发布
解释： package.json 中有 types 字段，或者有一个 index.d.ts 声明文件
自给自足型
创建一个 node_modules/@types/foo/index.d.ts 文件，存放 foo 模块的声明文件。不太建议用这种方案，一般只用作临时测试。
创建一个 types 目录，专门用来管理自己写的声明文件，将 foo 的声明文件放到 types/foo/index.d.ts 中。这种方式需要配置下 tsconfig.json 中的 paths 和 baseUrl 字段。
  /path/to/project    ├── src    |  └── index.ts    ├── types    |  └── foo    |     └── index.d.ts    └── tsconfig.json
  {    "compilerOptions": {        "module": "commonjs",        "baseUrl": "./",        "paths": {            "*": ["types/*"]        }    }}
ts声明文件书写姿势
全局型
# let declare let jQuery: (selector: string) => any;# function declare function jQuery(selector: string): any;#class declare class Animal {    name: string;    constructor(name: string);    sayHi(): string;}#enumdeclare enum Directions {    Up,    Down,    Left,    Right}#namespace declare namespace jQuery {    function ajax(url: string, settings?: any): void;    namespace fn {        function extend(object: any): void;    }}
npm包型 - export
// types/foo/index.d.tsexport const name: string;export function getName(): string;export class Animal {    constructor(name: string);    sayHi(): string;}export enum Directions {    Up,    Down,    Left,    Right}export interface Options {    data: any;}export namespace foo {    const name: string;    namespace bar {        function baz(): string;    }}
npm包型 - export default
// types/foo/index.d.ts# function、class 和 interface 可以直接默认导出，其他的变量需要先定义出来，再默认导出export default function foo(): string;export default Directions;declare enum Directions {    Up,    Down,    Left,    Right}
npm包型 - 先声明，在export
// types/foo/index.d.tsdeclare const name: string;declare function getName(): string;declare class Animal {    constructor(name: string);    sayHi(): string;}declare enum Directions {    Up,    Down,    Left,    Right}#interface 前是不需要 declareinterface Options {    data: any;}export { name, getName, Animal, Directions, Options };
module 拓展
// types/foo-bar.d.tsdeclare module 'foo' {    export interface Foo {        foo: string;    }}declare module 'bar' {    export function bar(): string;}// src/index.tsimport { Foo } from 'foo';import * as bar from 'bar';let f: Foo;bar.bar();
三斜线指令
书写一个全局变量的声明文件
依赖一个全局变量的声明文件
// types/jquery-plugin/index.d.ts/// declare function foo(options: JQuery.AjaxSettings): string;
ts文件tsc自动生成声明文件
命令行参数
--declaration(简写 -d)
tsconfig.json
{    "compilerOptions": {        "module": "commonjs",        "outDir": "lib",        "declaration": true,    }}
ts发布
发布到社区
  @types 是统一由 DefinitelyTyped 管理的。要将声明文件发布到 @types 下，就需要给 DefinitelyTyped 创建一个 pull-request，其中包含了类型声明文件，测试代码，以及 tsconfig.json 等。
与源码一起(依次查找*.d.ts) 
1. 给 package.json 中的 types 或 typings 字段指定一个类型声明文件地址 2. 在项目根目录下，编写一个 index.d.ts 文件 3. 针对入口文件(package.json 中的 main 字段指定的入口文件)，编写一个同名不同后缀的 .d.ts 文件
参考
https://ts.xcatliu.com/basics/declaration-files
本文作者：前端漫谈(CheongHu)
联系邮箱：simple2012hcz@126.com