TypeScript基础篇 - TS日常类型 上篇

目录

TS的常见用法介绍

example01.ts

逃避类型检查:any

思考一下~:不知道类型

类型标注

函数(参数和返回值)

匿名函数

TS如何知道匿名函数的类型?


TS是一种标注式语言,不侵入JS的设计

TS的常见用法介绍

文章内容

  • 基础类型、数组
  • any/unkown
  • 类型标注
  • 函数
  • 对象类型
  • 联合
  • 别名
  • 接口
  • 断言
  • 字面类型
  • null and undefined
  • 枚举类型

基础类型、数组

  • string,number,boolean,null【人为赋值null】,undefined【就是没有设置值】
  • Array,T代表数组中元素类型
    • 为什么要求数组中类型统一?人类思考问题的方式;类型的方式思考程序,如一组人
javascript 复制代码
// null;undefined
const a = {}
a["aaa"] // undefined
a["aaa"] = null // null
if(a["aaa"] === null) {}
// js 
new Array()
// TS;浏览器中不支持;要有1TS环境
new Array<T>()

example01.ts

TypeScript 复制代码
// js语法
const a = new Array()
// ts语法
const b = new Array<string>()// 泛型,定义数组每项元素只能式string
b.push('123')// b只能push字符串,其他类型都会编译报错

// 让typescript认为当前文件是一个模块,这个文件里的变量都是局部的
export {}

逃避类型检查:any

TypeScript 复制代码
let obj:any = { x: 0 };
// 后续都不会被检查
// `any`屏蔽了所有类型检查,相当于你相信你对程序的理解式高于TS的
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
const a: {[key: string] :number} = { x: 1 };
a.y = 2
a.z = 3
a.o = "123" // 报错

思考一下~:不知道类型

为什么要提供unknown?

TypeScript 复制代码
let value: unknown;
value = true; // ok
value = 42; // ok
value = "hello"; // ok
let value3:boolean = value; // Error

类型标注

TypeScript 复制代码
let myName:string = "Alice"; // :string 标注类型为字符串
let yourName = "Bob"; // 未明确标注类型,会推到出此类型为string

函数(参数和返回值)

TypeScript 复制代码
// greet : string -> number (Haskell)
function greet(name: string): number {
    console.log("Hello," + name.toUpperCase() + "!!");
}
greet(42) // Error ,要求string
let x: string = greet("omg") // Error , x要求字符串,返回值要求数字

匿名函数

TypeScript 复制代码
const names = ["Alice", "Bob", "Erice"];
// Array<string>
names.forEach(function (s) {
    // s: string // 类型的上下文推到 contextual mapping
    console.log(s.toUppercase());
});
names.map(value => {
    // value: string // 类型的上下文推到 contextual mapping
   const y: number = value // Error
});
names.forEach((s) => {
    console.log(s.toUppercase());
})

TS如何知道匿名函数的类型?

contexture Typing技术

  • 根据上下文(Context)推导类型
  • 还有什么是Context Typing?

上下文是指程序间组件共享的知识,可以是任何东西

TypeScript 复制代码
class A {
    foo(){
        // this就是类A的上下文
        this.bar()    
    }
    bar(){
            
    }
}
function foo2() { // 闭包
    const x = 1
    function bar() { // 子闭包
            
    }
}
相关推荐
梦想的旅途24 分钟前
企业微信API实战:Python自动化消息推送
java·前端·python·自动化·企业微信
恋猫de小郭4 分钟前
Flutter 3.47 发布,快来看看有什么更新吧
android·前端·flutter
程序员黑豆5 分钟前
Java 内存存储机制:基本数据类型 vs 引用数据类型
前端·ai编程·全栈
90后的晨仔16 分钟前
uni-app 三方库与插件管理体系全解析:从原生开发者视角彻底讲透
前端
程序员爱钓鱼19 分钟前
Rust 生命周期案例详解:从编译错误到真实业务场景
前端·后端·rust
90后的晨仔1 小时前
uni-app 跨端布局与适配技术指南
前端
油丶酸萝卜别吃6 小时前
utils.js 说明文档
开发语言·javascript·ecmascript
zyplayer-doc9 小时前
VuePress类静态文档站和动态知识库怎么选:两种技术路线的适用场景
javascript·人工智能·后端·安全·智能手机
紫禁玄科10 小时前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
东风破_10 小时前
后端API没写好,前端难道干等着吗?
前端