https://www.typescriptlang.org/docs/home

TypeScript for the New Programmer

What is JavaScript? A Brief History

TypeScript: A Static Type Checker 静态类型检查

A Typed Superset of JavaScript

Syntax 语法

• TypeScript doesn’t consider any JavaScript code to be an error because of its syntax. This means you can take any working JavaScript code and put it in a TypeScript file without worrying about exactly how it’s written. TS 内可以放入任何可运行的 JS

Types

• However, TypeScript is a typed superset, meaning that it adds rules about how different kinds of values can be used. The earlier error about obj.heigth was not an error about the syntax of the program, but instead an error about using a kind of value (a type) in an incorrect way. TS 只规定了如何使用不同类型的值
• Later, we’ll learn about settings you can use to configure how strictly TypeScript checks your code. TS 对代码进行检查的严格程度可以配置

Runtime Behavior 运行时行为

• TypeScript is also a programming language that preserves the runtime behavior of JavaScript. For example, dividing by zero in JavaScript produces Infinity instead of throwing a runtime exception. TypeScript never changes the runtime behavior of JavaScript code. TS 不会改变代码的运行时行为，例如 JS 中除于 0 会等于无穷大而不是报错，TS 中也一样。

Erased Types 删除的类型

• TypeScript’s type system is erased, meaning that once your code is compiled, there is no persisted type information in the resulting JavaScript code. TS 编译后的代码不包含类型

Learning JavaScript and TypeScript

• Because TypeScript shares syntax and runtime behavior with JavaScript, TS 和 JS 的语法和运行时行为是一样的
• For example, there about 20 times more StackOverflow questions tagged javascript than typescript JS 相对于 TS 而言更更容易出现堆栈溢出

TypeScript for JavaScript Programmers

Types by Inference 推断类型

• TypeScript knows the JavaScript language and will generate types for you in many cases. For example in creating a variable and assigning it to a particular value, TypeScript will use the value as its type. TS 在很多情况下会自动判断类型。例如，在创建变量时给予赋值

let helloWorld = "Hello World";

Defining Types 自定义类型

• Some design patterns can be hard to automatically provide types for automatically (because they might use dynamic programming) in those cases TypeScript supports an extension of the JavaScript language which offers places for you to tell TypeScript what the types should be. 运行时赋值无法推断出类型，需要用户自定义
• You can then declare that a JavaScript object conforms to that shape of your new interface by using syntax like : TypeName after a variable declaration: 变量声明之后，使用 TypeName 语法生命对象 user 符合这个 interface
• 注释： interface 只限定了最小包含，给 user 赋值的对象可以包含处 interface 声明外的其他属性

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0
};

• Because JavaScript supports classes and object-orient programming, so does TypeScript - an interface declaration can also be used with classes: interface 类型可以用于 class 创建的对象
• Interfaces can be used to annotate parameters and return values to functions: Interfaces 可以用于注释函数的返回和参数

function getAdminUser(): User {
  //...
}

function deleteUser(user: User) {
  // ...
}

• There are already a small set of primitive types available in JavaScript: boolean, bigint, null, number, string, symbol, object and undefined, which you can use in an interface. 继承自 JS 的类型有 boolean, bigint, null, number, string, symbol, object and undefined，可以在 Interfaces 类型中使用
• TypeScript extends this list with a few more. for example: TS 扩展的包括如下
  • any (allow anything) 任意类型
  • unknown (ensure someone using this type declares what the type is) 使用该类型时才进行声明
  • never (it’s not possible that this type could happen) 这个类型代表不可能发生，例如抛出错误的函数
  • void (a function which returns undefined or has no return value). 返回未定义或者没有返回值，例如没有 return 的函数
• You’ll see quite quickly that there are two syntaxes for building types: Interfaces and Types - you should prefer interface, and use type when you need specific features. 构建类型有两种方法 Interfaces（接口） and Types，Interfaces 比较常用，Types 是为了实现某些特定功能

Composing Types 组合类型

• The two most popular techniques you would use in everyday code to create new types by working with many smaller types are Unions and Generics. 通过 Unions 和 Generics 组合小类型为复杂类型

Unions 联合

• A union is a way to declare that a type could be one of many types. Unions 是指多种类型之一
• For example, you could describe a boolean type as being either true or false: 也可以直接声明具体值，会自动判断类型

function getLength(obj: string | string[]) {
  return obj;
}

type WindowStates = "open" | "closed" | "minimized";

• TypeScript understands how code changes what the variable could be with time, you can use these checks to narrow the type down. 如果有多种类型，TS 可以根据 === 来判断在不同代码路径下的具体类型
  • string typeof s === "string"
  • number typeof n === "number"
  • boolean typeof b === "boolean"
  • undefined typeof undefined === "undefined"
  • function typeof f === "function"
  • array Array.isArray(a)

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
//          ^ = (parameter) obj: string
  } else {
    return obj;
  }
}

Generics 泛型

疑问：TS

原文：https://www.cnblogs.com/qq3279338858/p/12631728.html