首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TypeScript | 笔记

TypeScript | 笔记

作者头像
yiyun
发布2023-01-08 10:45:28
发布2023-01-08 10:45:28
27500
代码可运行
举报
文章被收录于专栏:yiyun 的专栏yiyun 的专栏
运行总次数:0
代码可运行

引言

TypeScript 学习笔记

TypeScript 是 JavaScript 的超集

你写 ts 代码,然后通过 ts 编译器编译为纯粹的 js 代码

ts 使用 js 语法,然后添加一个额外的语法以便支持强类型

安装

安装ts compiler

代码语言:javascript
代码运行次数:0
运行
复制
npm install -g typescript
tsc --v

代码语言:javascript
代码运行次数:0
运行
复制
npm install -g ts-node

编译 app.ts

代码语言:javascript
代码运行次数:0
运行
复制
tsc app.ts

node app.js

代码语言:javascript
代码运行次数:0
运行
复制
ts-node app.ts

Why TypeScript ?

代码语言:javascript
代码运行次数:0
运行
复制
let box;
console.log(typeof(box)); // undefined

box = "Hello";
console.log(typeof(box)); // string

box = 100;
console.log(typeof(box)); // number

类型注解

代码语言:javascript
代码运行次数:0
运行
复制
let variableName: type;
let variableName: type = value;
const constantName: type = value;

代码语言:javascript
代码运行次数:0
运行
复制
et counter: number;
counter = 'Hello'; // compile error

代码语言:javascript
代码运行次数:0
运行
复制
Type '"Hello"' is not assignable to type 'number'.

代码语言:javascript
代码运行次数:0
运行
复制
let name: string = 'John';
let age: number = 25;
let active: boolean = true;

数组

代码语言:javascript
代码运行次数:0
运行
复制
let names: string[] = ['John', 'Jane', 'Peter', 'David', 'Mary'];

对象

代码语言:javascript
代码运行次数:0
运行
复制
let person: {
   name: string;
   age: number
};

person = {
   name: 'John',
   age: 25
}; // valid

函数参数与返回值类型

代码语言:javascript
代码运行次数:0
运行
复制
let greeting : (name: string) => string;

greeting = function (name: string) {
    return `Hi ${name}`;
};

类型推断

上下文类型(根据上下文推断类型)

类型

Number

String

代码语言:javascript
代码运行次数:0
运行
复制
let firstName: string = `John`;
let title: string = `Web Developer`;
let profile: string = `I'm ${firstName}. 
I'm a ${title}`;

console.log(profile);

Boolean

代码语言:javascript
代码运行次数:0
运行
复制
let pending: boolean;
pending = true;
// after a while
// ..
pending = false;

object Type

代码语言:javascript
代码运行次数:0
运行
复制
let employee: object;

employee = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    jobTitle: 'Web Developer'
};

console.log(employee);

object vs. Object

The empty type

Summary

数组

代码语言:javascript
代码运行次数:0
运行
复制
let arrayName: type[];

let skills: string[];
skills[0] = "Problem Solving";
skills[1] = "Programming";
skills.push('Software Design');

let skills = ['Problem Sovling','Software Design','Programming'];

let skills: string[];
skills = ['Problem Sovling','Software Design','Programming'];

Storing values of mixed types

元组 Tuple

TODO: 元组 Tuple

Q&A

补充

参考

感谢帮助!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 数组
  • 对象
  • 函数参数与返回值类型
  • 类型推断
  • 上下文类型(根据上下文推断类型)
  • Number
  • String
  • Boolean
  • object Type
  • object vs. Object
  • The empty type
  • Summary
  • 数组
  • Storing values of mixed types
  • 元组 Tuple
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档