1. tsconfig.json 配置文件

{"compilerOptions": {"target": "esnext","jsx": "preserve","jsxImportSource": "vue","lib": ["esnext", "dom"],"useDefineForClassFields": true,"experimentalDecorators": true,// baseUrl 用来告诉编译器到哪里去查找模块，使用非相对模块时必须配置此项"baseUrl": ".","module": "esnext","moduleResolution": "bundler",// 非相对模块导入的路径映射配置，根据 baseUrl 配置进行路径计算，与 vite.config 中 alias 配置同步"paths": {"@/*": ["src/*"],"@@/*": ["src/common/*"]},"resolveJsonModule": true,"types": ["vite/client", "element-plus/global"],// 允许导入 .ts .mts .tsx 拓展名的文件"allowImportingTsExtensions": true,// 允许 JS"allowJs": true,// TS 严格模式"strict": true,"importHelpers": true,// 不输出任何编译后的文件，只进行类型检查"noEmit": true,"sourceMap": true,"allowSyntheticDefaultImports": true,"esModuleInterop": true,"isolatedModules": true,"skipLibCheck": true},// 需要被编译的文件列表"include": ["**/*.ts", "**/*.tsx", "**/*.vue", "**/*.d.ts"],// 从编译中排除的文件列表"exclude": ["node_modules", "dist"]
}

2. 创建一个值为字符串的变量

let message: string = 'Hello TypeScript'

3. 布尔值

let isDone:boolean = false;

4. 数字

let decimal: number = 6;
let hex: number = 0xf00d;
let binay: number = 0b1010;
let octal: number = 0O744;

5. 数组

let list: number[] = [1,2,3];
// 使用泛型数组类型：
let list1: Array<number> = [4,5,6];

6. 元组

let x: [string, number];
x = ['hello', 10]

7. 枚举

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

8. Any

// 不确定变量类型时，可以使用 any 类型：
let notSure: any = 4;
notSure = 'maybe a string instead';
notSure = false;

9. Void

// 用于表示没有任何类型，常用于没有返回值的函数
function warnUser(): void {console.log('this is a viod log')
}

10. Null 和 Undefined

let u: undefined = undefined;
let n: null = null;

11. Never

// 表示那些用不存在的值的类型，例如：永远不会返回的函数表达式或箭头函数的返回值类型：
function error(message: string): never {throw new Error(message)
}

12. Object

// 表示非原始类型
declare function ceeate(o: object | null): void;
create({ prop: 0 })
create(null);

13. 接口

/*** 接口是 TypeScript 中的核心原则之一，用于定义对象的类型。* 接口能够描述一个对象的形状，能够检查对象是否符合特定的结构。* 示例如下：*/
interface LabelledValue {label: string;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj = { size: 10, label: 'Size 10 Object' };printLabel(myObj);
/*** 小结：LabelledValue 接口定义了一个 label 属性，并且 printLabel 函数期望一个实现了 LabelledValue 接口的对象作为参数。即使 myObj 有其他属性，但只要它至少有一个 label 属性，TS 就会认为它是合法的。*/

14. 可选属性

// 可选属性接口允许一些属性存在，也允许一些属性不存在：
interface SquareConfig {color?: string;width?: number;
}function createSquare(config: SquareConfig): {color: string, area: number} {let newSquare = { color: 'white', area: 100 };if(config.color) {newSquare.color = config.color;}if(config.width) {newSquare.area = config.width * config.width;}return newSquare;
}let mySquare = createSquare({ color: 'black' })
// 小结：SquareConfig 接口定义了 color 和 width 可选属性。CreateSquare 函数根据传入 config 对象动态地创建一个新的对象。

15. 只读属性

// 一些属性可以在对象刚刚船舰的时候修改其值，而在此之后将是只读的
interface Point {readonly x: number;readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
pi.x = 5; // 一旦赋值就会报错误，不能改变只读属性

16. 函数类型

// 接口也可以描述函数类型
interface SeachFunc {(source: string, subString: string): beelean;
}let mySearch: SearchFunc;
mySearch = function (source: string, subString: string) {let result = source.Search(subString);return result > -1;
};

17. 可索引类型

// 接口可以描述那些能够通过索引得到某种类型的对象，这在对象上可以用数字索引或字符串索引
interface StringArray {[index: number]: string;
}let myArray: StringArray;
myArray = ['Bob', 'Fred'];let myStr: string = myArray[0];
// StringArray 接口描述了具有数字索引的数组类型，并且返回值是字符串类型

17. 类-简单类

class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return 'Hello, ' + this.greeting;}
}
let greeter = new Greeter('world');
// Greeter 类有一个 greeting 属性和一个 greet 方法， greet 方法返回一个字符串。

18. 类-继承

// 类可以扩展其他类，一个类可以继承另一个类的属性和方法；
class Animal {name: string;constructor(theName: string) {this.name = theName;}move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`);}
}class Snke extends Animal {constructor(name: string) {super(name);}move(distanceInMeters = 5) {console.log('Slithering...');super.move(distanceInMeters);}
}let sam = new Snake('Sammy the Python');
sam.move();
// Snke 类扩展了 Animal 类，并且重写了 move 方法.

19. 类-公共，私有与受保护修饰符

// TS 中的成员默认是公共的，也可以用 private 修饰符将成员标记为私有的：
class Animal {private name: string;constructor(theName: string) {this.name = theName;}
}new Animal('Cat').name; // 错误： name 是私有的// 可以使用 protected 修饰符声明受保护的成员，这些成员只能在类本身及其子类中访问：
class Person {protected name: string; // 受保护的成员，只能在类本身及其子类访问constructor(name: string) {this.name = name;}
}class Employee extends Person {private department: string;constructor(name: string, department: string) {super(name);this.department = department;}getElevatorPitch() {return `Hello, my name is ${this.name} and I work in ${this.department}.`}
}let howard = new Employee('Howard', 'Sales');
console.log(howard.getElevatorPitch()); //有效
console.log(howard.name); // 错误

20. 类-readonly 修饰符

// readonly 关键字将属性设置为只读
class Octopus {readonly name: string;readonly numberOfLegs: number = 0;constructor(theName: string) {this.name = theName;}
}
let dad = new Octopus('Man width the 8 strong legs');
dad.name = 'Man with the 3'; // 错误 name是只读的；

21. 类-存取器

// 支持通过 get 和 set 关键字来定义存取器
class Employee {private _fullName: string; // 设置私有属性get fullName(): string {return this._fullName;}set fullName(newName: string) {this._fullName = newName;}
}let employee = new Employee();
employee.fullName = 'Bob Smith';
console.log(employee.fullName)
// Employee 类有一个私有属性 _fullName, 并且通过存取器来设置和获取它的值。

22. 函数-（和JavaScript函数类似，但在参数和返回类型上提供了更多类型的检查）
23. 函数类型

// 为函数的参数和返回值指定类型
function add(x: number, y: number): number {return x + y;
}let myAdd:(x: number, y: number) => number = function (x: number, y: number): number {return x + y;
}

24. 函数-可选参数和默认参数

// 可以通过在参数名旁使用 ？ 来实现可选参数
function buildName(firstName: string, lastName?: string): string {if(lastName) {return firstName + ' ' + lastName;} else {return firstName;}
}let result1 = buildName('Bob'); // 有效
let result2 = buildName('Bob', 'Adams'); // 有效
// 还可以为参数提供默认值
function buildName(firstName: string, lastNAme = 'Smith'): string {return firstName + ' ' + lastName;
}let result1 = buildName('Bob'); // 有效 返回 'Bob Smith'
let result2 = buildName('Bob', 'Adams'); // 有效 返回 'Bob Adams' 

25. 函数-剩余参数

// 可以使用 ... 语法将所有参数收集到一个变量中
function buildName(firstName: string, ...restOfName: string[]) {return firstNAme + '' + resetOfName.join('');
}let employeeName = buildName('Joseph', 'Samuel', 'Lucas', 'MackinZie');

26. 函数-this和箭头函数

// 在 TypeScript 中， this 的值取决于函数调用的位置，可以使用箭头来正确的捕获this 的值
let dect = {suits: ['hearts', 'spades', 'cluds', 'diamonds'],cards: Array(52),createCardPicker: function () {return () => {let pickedCard = Math.floor(Math.random() * 52);let pickedSuit = Math.floor(pickedCard / 13);return { suit: this.suits[pickedSuit], card: pickedCard % 13 };};};
};let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();console.log('card:', pickedCard.card)
console.log('suit:', pickedCard.suit)
// 例子中，箭头函数不会创建自己的 this， 它会捕获 deck 对象的 this 值。

27. 泛型-泛型函数

function identity<T>(arg: T): T {return arg;
}let output = identity<string>('mtstring'); // 手动指定类型
let output2 = identity('mystring'); // 类型推断

28. 泛型-泛型接口

interface CenericIdentityFn<T> {(arg: T): T;
}function identity<T>(arg: T): T {return arg;
}let myIdentity: GenericIdentityFn<number> = identity;
// 上述例子中，GenericIdentityFn 接口描述了一个泛型函数类型，并且 myIdentity 是一个特定类型的泛型函数。

29. 泛型- 泛型类

class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;
}let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {return x + y;
}
// GenericNumber 是一个泛型类，它可以处理任意类型的数字 

30. 泛型-泛型约束

// 想要限制某种类型的泛型函数，就可以使用泛型约束
interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length)return arg;
}loggingIdentity({length: 10, value: 2});
// loggingIdentity 函数要求传入的参数必须有 length 属性。

31. 泛型-在泛型约束中使用类型参数

function getProperty<T, K extends keyof T>(obj: T, key: K) {return obj[key];
}let x = {a: 1, b: 2, c: 3, d: 4};getProperty(x, 'a') // 有效
getProperty(x: 'm') // 错误：类型‘m’的参数不能赋给类型"a" | "b" | "c" | "d" 的参数
// 上述例子中，getProperty 函数接收一个对象和一个属性名称，并返回该属性的值，K被约束为 T的属性名称。

32. 类型推断

• TypeScript 能够根据代码中的一些简单的规则推断变量的类型。如果变量声明时没有指定类型，TypeScript会自动推断出一个类型

33. 类型推断-基础示例

let x = 3; // x 被推断为 number 类型

34. 类型推断-最佳通用类型

// 当需要从多个表达式中推断类型时， TypeScript 会选择最合适的通用类型
let x = [0, 1, null]; // x 的类型推断为(number | null)

35. 类型兼容性

• TypeScript 中的类型兼容性是基于结构子类型的。结构类型系统是基于类型的成员来确定类型的兼容性。

36. 类型兼容性-接口兼容性

interface Named {name: string;
}class Person {name: string;
}let p: Named;
p = new Person(); // 正确 因为 Person 有一个兼容的 name 属性

37. 类型兼容性-函数兼容性

let x = (a: number) => 0;
let y = (b: number, s: string) => 0;y = x; // OK
x = y; // Err

38. 高级类型

• TypeScript 提供了许多高级类型操作，可以在编辑复杂类型定义时提供更强的灵活性

39. 高级类型-交叉类型

// 交叉类型 & 是将多个类型合并为一个类型
function extend<T, U>(first: T, second: U): T & U {let result = <T & U>{};for(let id in first) {(result as any)[id] = (first as any)[id]}for(let id in second) {if(!result.hasOwnProperty(id)) {(result as any)[id] = (second as any)[id];}}return result;
}let x = extend({ a: 'hello' }, { b: 42 });
let a = x.a; // string
let b = x.b; // number

40. 高级类型-联合类型

• 联合类型 | 表示一个值可以是几种类型之一

function padLeft(value: string, padding: string | number) {if(typeof padding === 'number') {return Array(padding + 1).join(' ') + value;}if(typeof padding === 'string') {return padding + value;}throw new Error(`Expected string or number, got ${typeof padding}.`);
}padLeft('Hello world', 4); // 返回 "    Hello world"
padLeft('Hello world', '>>>'); // 返回 ">>>Hello world"

49. 高级类型- 类型别名

• 类型别名可以类型起一个新名字

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name {if(typeof n === 'string') {return n;} else {return n();}
}

50. 高级类型-字面量类型

• 字面量类型约束一个变量的值只能是某个特定的值

type Easing = 'ease-in' | 'ease-out' | 'ease-in-out';class UIElement {animate(dx: number, dy: number, easing: Easing) {if(easing === 'ease-in') {// do something...} else if(easing === 'ease-out') {// do something...} else if(easing === 'ease-in-out') {// do something} else {throw new Error('参数必须是ease-in, ease-out,ease-in-out')}}
}let button = new UIElement();
button.animate(0, 0, 'ease-in'); // ok
button.animate(0, 0, 'unesay'); // error

51. 装饰器

• 装饰器是一个特殊类型的声明，能够被附加到类声明、方法、访问器、属性或参数上，装饰器使用 @expressoon 这种形式， expression必须求值为一个函数，它将在运行时被调用，被装饰的声明信息作为参数传入。

52. 装饰器-类装饰器

function sealed(constructor: Function) {Object.seal(constructor);Object.seal(constructor.prototype);
}@sealed
class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return 'Hellow, ' + this.greeting;}
}

53. 装饰器-方法装饰器

function enumerable(value: boolean) {return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {descriptor.enumerable = value;}
}class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}@enumerable(false)greet() {return 'Hello, ' + this.greeting;}
}

54. 编译选项

• TypeScript 编译器 可以通过命令行参数和 tsconfig.json 文件进行配置。
• tsconfig.json 文件用于配置 TypeScript 项目，示例如下：

{"compilerOptions": {"target": "es6","module": "commonjs","strict": true,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true},"include": ["src/**/*"],"exclude": ["node_modules", "**/*.spec.ts"]
}

55. 常见问题与最佳时间
56. 如何进行类型定义

• 解答： 在 TypeScript 中进行类型定义时，推荐尽量使用接口，因为接口可以被类实现和扩展，并且更加灵活和易于阅读。

2. 何时使用类型断言？

• 解答： 类型断言用于告诉编译器某个值的具体类型：

let someValue: any = 'this is a string';
let strLength: number = (someValue as string).length;
// 尽量避免过度使用类型断言，因为它可能隐藏潜在的类型错误

3. 如何处理第三方库的类型定义

• 解答：可以使用 DefinitelyTyped 项目提供的类型定义文件

npm install @type/jquery --save-dev

• 这样就可以在 TypeScript 项目中使用 jQuery 的类型定义文件

4. 如何调试 TypeScript 代码

• 解答： 可以通过生成 Source Map 文件来调试 TypeScript 代码

{"compilerOptions": {"sourceMap": true}
}
// 这样就可以在调试工具中直接看到  TypeScript 代码，并且设置断点进行调试

5. 如何提高代码质量

• 启用严格模式：在 tsconfig.json 中启用 strict选项
• 使用代码格式化工具， 如 Prettier 来保持代码风格一致。
• 使用代码静态分析工具： 如 ESLint 来发现和修复代码中的潜在问题
• 编写单元测试： 确保代码的正确性和稳定性