By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.
Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.
一、使用
- 在根目录中，生成 package 文件，
yarn init --dev - 下载 typescript 依赖，
yarn add typescript --dev - 使用终端指令编译 ts ，
yarn tsc 文件名 - 生成 TypeScript 配置文件，
yarn tsc --init
- 编译 ts 文件，
yarn tsc - 编译中文错误提示的文件，
yarn tsc --locale zh-CN
二、TS 的配置文件
执行 yarn tsc --init 会在根目录生成一个配置文件：tsconfig.json
（还可以设置严格模式等等。）
三、模块作用域
为了避免全局命名冲突，需要让 ts 文件变成一个模块文件。（或者放在 IIFE 中。）
export {}
四、类型
1.原始类型
// 原始类型 const a:string = 'foo'; const b:number = 123; const c:boolean = true; // false // const d:boolean = null; const e:void = undefined; const f:undefined = undefined; const g:null = null; const h:symbol = Symbol(); // es2015 新增类型 需要修改配置文件的 target 或 lib // 标准库就是内置对象所对应的声明 // const error:string = 100;
2.对象类型
// Object 类型 export {} // 避免作用域变量冲突 // 除了原始类型以外的所有对象类型 const foo: object = function () {} // [] // {} // 对象的类型限制：对象字面量 const obj: {foo: number, bar: string} = { foo: 123, bar: 'str', };
3.数组类型
// 数组类型 export {} const arr1: Array<number> = [1, 2, 3]; const arr2: number[] = [4, 5, 6]; // 常用 function sum (...args: number[]) { return args.reduce((prev, current) => prev + current, 0); } sum(1, 2, 3, 4);
4.元组类型
// 元组类型 明确元素数量和类型的数组 export {} const tuple: [number, string] = [1, 'str']; // const age:number = tuple[0]; // const name = tuple[1]; const [age, name] = tuple; // ---------------- Object.entries({ foo: 123, bar: 456 })
5.枚举类型
// 枚举类型 export {} // const PostStatus = { // Draft: 0, // Unpublished: 1, // Published: 2 // } // enum PostStatus { // Draft = 0, // Unpublished = 1, // Published = 2 // } // enum PostStatus { // Draft = 6, // Unpublished, // 7 // Published // 8 // } // 字符串枚举 // enum PostStatus { // Draft = "aaa", // Unpublished = "bbb", // Published = "ccc" // } // 常量枚举 const enum PostStatus { Draft, Unpublished, Published } const post = { title: 'this is a title of the current post', content: 'Hello TypeScript! This is a typed superset of JavaScript.', status: PostStatus.Draft // 0 // 1 // 2 }
6.函数类型
// 函数类型 export {} function func1 (a:number, b:number = 10, ...rest: number[]):string { return 'func1' } func1(1, 2); func1(1); // func1(1, 2, 3); // 在 b 后面加上?，b 变成可选参数 function func2 (a:number, b?:number):string { return 'func2' } func2(1, 2); func2(1); // ===================== // func3 的形参类型限制 + 返回值的类型限制 const func3: (a: number, b: number) => string = function (a:number, b:number):string { return 'func3' }
7.任意类型
// 任意类型 export {} function stringify (value: any) { return JSON.stringify(value); } stringify(123); stringify('string'); stringify(true); let foo: any = '123'; foo = 123; // any 类型并不安全
8.隐式类型推断
// 隐式类型推断 export {} let age = 18; // 此处已推断为 number // age = '123'; let foo; // any 类型 foo = 123; foo = 'str';
9.类型断言
// 类型断言 export {} const nums = [1, 2, 3, 4, 5]; const res = nums.find(n => n > 2); // const square = res * res; const num1 = res as number; // 将 res 明确看作数字类型 const num2 = <number>res; // JSX 中不要使用
