TypeScript基础学习总结

TypeScript 是什么

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.

• TypeScript 是 JavaScript 的类型的超集，可编译成纯 JavaScript；
• 编译出来的 JavaScript 可运行在任何浏览器上；
• TypeScript 编译工具可以运行在任何服务器和任何系统上；
• TypeScript 是开源的。

为什么是 TypeScript？

1. TypeScript 增加了代码的可读性和可维护性；

• 类型系统实际上是最好的文档，看完类型定义即可掌握大部分函数如何使用；
• 可在编译阶段提前发现大部分错误；
• 增强编辑器和 IDE的功能，包括代码补全、接口提示、跳转到定义、重构等。

2.TypeScript 包容性

• js 文件可直接重命名为 .ts 文件；
• 自动类型推论；
• 可以定义从简单到复杂的几乎一切类型；
• 即使 TypeScript 编译报错，也可生成 JavaScript 文件；
• 兼容JavaScript第三方库。

3.TypeScript 拥有活跃的社区

• 大部分第三方库都有提供给 TypeScript 的类型定义文件；
• Google Angular2 使用 TypeScript 编写；
• Vue.js、React 也很好的支持 TypeScript；
• TypeScript 拥抱了 ES6 规范，支持部分 ESNext 草案规范；
• TypeScript 开发维护团队有微软、谷歌等大厂支持。

TypeScript 注意事项
需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）

开始学习了 注意力一定要集中了

第一 就是 ： 基础语法

1. 变量
2. 模块
3. 函数
4. 语句和表达式
5. 注释

变量
var [变量名] : [类型] = 值;
var [变量名] = 值;
var [变量名] : [类型];

const hello : string = "Hello World!";
const score : number = 100;
let arr : string[] = ['abc', 'def', 'ghi']; let name = 'Jack';
let alias : string;

模块
一个文件就是一个模块，模块可导出供其他模块使用，也可导入其他模块来使用。

模块的用途

• 使代码层次分明，增强代码的可读性
• 使代码逻辑相对独立，避免命名冲突与污染，降低耦合性
• 使代码设计更通用，增加兼容性、复用性、可扩展性

// person.ts
export class Person {
 name: string;
 constructor( name: string){
 this.name = name;
 }
 sayhi():void{
 console.log(`Hi, I'am ${this.name}`);
 } }

// test.ts
import mod = require('./person');
const person = new mod.Person("Jack");
person.sayhi(); // => Hi, I'am Jack

函数
箭头定义函数与 function 定义的区别：
1.简化语法；
2.自动绑定定义时的 this 上下文环境

// 普通函数
const sayhi = function(name: string): string{
 return `hi, ${name}`; }
// 箭头函数
const sayhi1 = (name: string): string => {
 return `hi, ${name}`; }
// 箭头函数简写
const sayhi2 = (name: string): string => `hi, ${name}`
const result = sayhi2('Jack');
console.log(result); // => hi, Jack

语句与表达式

• 每一条语句以分号结束，一行中只有一条语句时分号可省略。
• 表达式有返回值，单值表达式返回自身，复杂表达式返回运算结果。

console.log("Baidu")
console.log("Google");
console.log("Baidu");console.log("Google");
// 表达式
let age : number = 18;
age++;
age = age < 20 ? 20 : age;
if(age > 0){
 console.log(`I'am ${age} years old.`) }

注释
注释语法分为单行注释和多行注释；

// 单行注释
/**
* 多行
* 注释
* ...
*/

总结 ： 以上5点都是重点

1. 变量
2. 模块
3. 函数
4. 语句和表达式
5. 注释

今天就到这吧 ！ 好消化 一天一点点

TypeScript 官网文档： http://www.typescriptlang.org/docs/home.html
TypeScript 中文文档： https://www.tslang.cn/docs/home.html

最后思考一个问题呗

思考： 如何应用 TypeScript 的类型解决具体业务需求中的问题？