它仍然是动态类型语言
兼容Javascript
基本语法
编译时检查
更好的重构支持
语言优势
类型声明文件
配置文件
鸭子类型
类型推断
泛型
工具类
类型系统
更好的社区支持
字面类型
TypeScript文化
历史
设计哲学
TypeScript文化
历史
TypeScript文化
历史
设计哲学
TypeScript文化
历史
设计哲学
它仍然是动态类型语言
兼容Javascript
基本语法
编译时检查
更好的重构支持
语言优势
类型声明文件
配置文件
鸭子类型
类型推断
泛型
工具类
类型系统
更好的社区支持
字面类型
TypeScript文化
历史
设计哲学
基本语法
兼容Javascript
基本语法
兼容Javascript
const name: string = 'Colin Han'类型推断
基本语法
const name = "Colin Han"; // name: string
const age = 18; // age: number
const isAdult = (age > 18); // isAdult: boolean
let a = getVideoList(age); // a: string]]
function getVideoList(age) { // getVideoList: (number) => string[]
if (age > 18) {
return ['video1', 'video2'];
} else {
return [];
}
}兼容Javascript
类型推断
鸭子类型
基本语法
interface Duck {
walk(): void;
quack(): void;
}
function roastDuck(duck: Duck) { /* ... */ }
const chick = {
walk: () => { /* */ },
quack: () => { /* */ }
}
const pig = { walk: () => { /* */ } }
roastDuck(chick); // 👏 Correct
roastDuck(pig); // 😭 Wrong类型推断
鸭子类型
配置文件
基本语法
// tsconfig.js
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}
类型推断
鸭子类型
配置文件
它仍然是动态类型语言
兼容Javascript
基本语法
编译时检查
更好的重构支持
语言优势
类型声明文件
配置文件
鸭子类型
类型推断
泛型
工具类
类型系统
更好的社区支持
字面类型
TypeScript文化
历史
设计哲学
类型系统
字面量类型
类型系统
字面量类型
let e: 'birds' | 'animals';
e = 'birds'; // 👏 Correct
e = 'duck'; // 😭 Wrong
let n: 1 | 2 | 3;
n = 1; // 👏 Correct
n = 4; // 😭 Wrong
let nullable: string | undefined;
nullable = undefined; // 👏 Correct
let tuple: [string, number];
tuple = ['abc', 10]; // 👏 Correct
tuple = [ 1, 2 ]; // 😭 Wrong泛型
类型系统
interface DefaultResult {
foo: string;
}
interface FetchResult<T extends DefaultResult = DefaultResult> {
success: boolean;
data: T;
}
let r1: FetchResult;
r1 = { success: true, data: { foo: 'abc' }}; // 👏 Correct
r1 = { success: false, data: 123 }; // 😭 Wrong
let r2: FetchResult<{ foo: string, bar: string }>;
r2 = { success: true, data: { foo: 'abc', bar: 'def' }}; // 👏 Correct
r2 = { success: true, data: { foo: 'abc' }}; // 😭 Wrong
字面量类型
泛型
只读属性
类型系统
interface A {
foo: string;
}
interface ReadonlyA {
readonly foo: string;
}
const r1: A = { foo: 'abc' };
r1.foo = 'ddd'; // 👏 Correct
const r2: ReadonlyA = { foo: 'abc' };
r2.foo = 'ddd'; // 😭 Wrong
const r3 = Readonly<A> = { foo: 'abc' };
r3.foo = 'ddd'; // 😭 Wrong
const r4 = Mutable<ReadonlyA> = { foo: 'abc' };
r4.foo = 'ddd'; // 👏 Correct工具类
泛型
只读属性
类型系统
type Types = 'type1' | 'type2' | 'type3';
interface Data {
foo: string;
}
// Record<Keys,Type>
const r: Record<Types, Data | undefined> = {};
r.type1 = { foo: 'abc' }; // 👏 Correct
r.type2 = { bar: 'def' }; // 😭 Wrong
r.another = { foo: 'abc' }; // 😭 Wrong
// Pick<Type, Keys>
const p: Pick<Record<Types, Data | undefined>, 'type1' | 'type2'> = {};
p.type3 = { foo: 'abc' }; // 😭 Wrong
// ReturnType<Type>
const r2: ReturnType<() => string>; // r2: string;
// Parameters<Type>
const p2: Parameters<(foo: string) => void>; // p2: [string];工具类
只读属性
它仍然是动态类型语言
兼容Javascript
基本语法
编译时检查
更好的重构支持
语言优势
类型声明文件
配置文件
鸭子类型
类型推断
泛型
工具类
类型系统
更好的社区支持
字面类型
TypeScript文化
历史
设计哲学