непосредственный
Урок 2, Основные типы и вводные расширенные типы
Урок 4. Интерпретация расширенных типов
Урок 5. Что такое пространство имен
Специальная статья, изучайте машинопись в исходном коде vue3🔥🦕 - "есть"
Урок 6, что такое файл декларации? 🦕 - Глобальная декларация
Недавно разработанный плагин vscode: ⚡любой тип, один клик из json в тип ts
грядет vue3
читатьvue conf 2019, особенно взволнован, грядет vue3!
vue3 разработан с машинописным текстом, Я предполагаю, что под руководством vue машинописный текст станет мейнстримом или сначала чему-то научится.
Самая крутая фронтенд-технология 19 лет
Я начал использовать его в начале 19typescript, я влюбился в него с тех пор, как начал его использовать, я действительно не мог оторваться от него, что мне больше всего в нем нравится:
- Много мелких ошибок, таких как:поле не существуетв или имя поляОпечатка, редактор будет подсказывать вам при написании кода, уменьшая вероятность низкоуровневых ошибок.
- Переменные, помеченные типами, при использовании редактор перечисляет методы и свойства переменных, что делает процесс разработки более удобным.
- Многие замечательные проекты разрабатываются с помощью машинописного текста, и при взгляде на исходный код его легче понять из-за аннотации типа.
- Сделайте свой собственный код потрясающим 🐂.
Я также надеюсь, что больше коллег начнут использовать машинописный текст, что сделает его еще одним инструментом для повышения зарплаты фронтенда (вспомните, что приносят вам веб-пакет и vue, самое раннее)есть краба"люди, точноНаслаждайтесь самым большим бонусом).
Поставь несколько проектов, которые я написал в процессе изучения машинописного текста.Поскольку я использовал машинописный текст, мне особенно понравилось строить колеса.Если писать не хорошо, то это просто энтузиазм, и каждый сможет написать лучше.
Библиотека жестов:GitHub.com/any86/anyi-he…
Императивно вызывайте компоненты vue:GitHub.com/easy86/v UE-от…
Некоторые фрагменты кода, часто используемые в работе:GitHub.com/easy86/use богатые…
Мини event-менеджер:GitHub.com/any86/anyi-о…
Как работает машинопись
пройти черезtypescriptинструмент командной строки, поставитьtypescriptПревратиться вjavascript, чтобы поддерживать работу в браузере.
Примечание: далее в статьеtypescriptкороткое имяts, javascriptкороткое имяjs.
особенности машинописного текста
Самая большая разница между ts и js в том, что ts большевведите аннотациюфункция, через " в названииtype«Можно также увидеть, что в центре внимания языка находится»тип"О. Этот тип делится набазовый типиРасширенный тип, расширенный тип выполняетсябазовый типсостоит изпользовательский тип.
базовый тип
содержитboolean / number / string / object / Массивы (существуют различные представления массивов, которые будут расширены в последующих статьях) / кортеж / перечислить / any / Undefined / Null / Void / Never
anyЭто основная тема данной статьи, и я остановлюсь на ней через некоторое время.
Расширенный тип
В основном даobjectТипы обозначены более подробно, здесь особо нечего сказать, просто приведите пример для понимания, знайте ключевые словаinterfaceВот оно, китайское имя"интерфейс", который будет расширен в последующих главах.
interface Article {
title: string;
count: number;
content: string;
tags: string[]; // 数组里的元素都是字符串
}
смарт vscode
когда мы используемvscodeРедактор, редактор будет основан на нашем ""введите аннотацию"провестиподсказки кодаиСообщение об ошибке:
Если тип неправильный, он также предложит:
начать, установить
- установить ноды
- запустить в командной строке
npm i -g typescript, Установитьпереводчикк глобальному. - Установитьредактор vscode.
начать писать код
генерировать js
- Создайте папку, создайте в ней новый файл hello.ts, обратите внимание, что расширениеts.
- использоватьvscodeОткрытымhello.tsдокумент.
- Введите следующий код, давайте испытаем ts:
interface A {
a:number,
b:string
}
let obj:A = {a:123,b:'456'};
- Командная строка для входа в папку, выполнить команду
npx tsc hello.ts
Ну, мы можем посмотреть еще один внутри файлаhello.js, откройте, чтобы посмотреть:
var obj = { a: 123, b: '456' };
"в кодевведите аннотацию«Его нет, наш ts скомпилирован в js, разве это не удивительно.
Сообщение об ошибке
interface A {
a:number,
b:string
}
// 错误, 会提示b的类型错误, 应该为string类型
let obj:A = {a:123,b:456};
любой тип
any означает любой тип. Этот тип особенно подходит для новичков в ТС. В начале некоторые типы не знают, как их выразить. Мы можемвременныйИспользуйте любое выражение, а затем отметьте точный тип после того, как освоите TS.
Новички могут не знать следующей ситуации, думая, что n помечено как число, но когда i больше 5 в цикле, это строка, поэтому ts выдаст ошибку.
let n:number;
for(let i = 0;i<10;i++) {
if(i <= 5) n = 10;
else n = '100';
}
// ts提示: 不能将类型“"100"”分配给类型“number”
Как новичок, если вы не знаете в начале "тип союза"Эта концепция, вы можете прямоnотметить какany:
// 熟练后会是这么标记的
// let n:string|number
let n:any;
for(let i = 0;i<10;i++) {
if(i <= 5) n = 10;
else n = '100';
}
Пополнить
Я вдруг вспомнил, что если наша конфигурация отличается, мы можем видеть разные подсказки, поэтому добавьте мою конфигурацию ts, пожалуйста, следуйте этой конфигурации, чтобы изучать этот курс, когда вы учитесь, я добавил комментарии для каждой конфигурации, если перевод Пожалуйста, оставьте сообщение ниже и дайте нам знать.
Использование также очень простое, tsconfig.json можно поместить в корневой каталог вашего проекта:
// tsconfig.json
{
"compilerOptions": {
// 不报告执行不到的代码错误。
"allowUnreachableCode": true,
// 必须标注为null类型,才可以赋值为null
"strictNullChecks": true,
// 严格模式, 强烈建议开启
"strict": true,
// 支持别名导入:
// import * as React from "react"
"esModuleInterop": true,
// 目标js的版本
"target": "es5",
// 目标代码的模块结构版本
"module": "es6",
// 在表达式和声明上有隐含的 any类型时报错。
"noImplicitAny": true,
// 删除注释
"removeComments": true,
// 保留 const和 enum声明
"preserveConstEnums": false,
// 生成sourceMap
"sourceMap": true,
// 目标文件所在路径
"outDir": "./lib",
// 编译过程中需要引入的库文件的列表
"lib": [
"dom",
"es7"
],
// 额外支持解构/forof等功能
"downlevelIteration": true,
// 是否生成声明文件
"declaration": true,
// 声明文件路径
"declarationDir": "./lib",
// 此处设置为node,才能解析import xx from 'xx'
"moduleResolution": "node"
},
// 入口文件
"include": [
"src/main.ts"
]
}
Суммировать
В 2019 году ts должен стать большим хитом. Пожалуйста, будьте уверены, чтобы изучить ts. Вы можете использовать его сначала в начальной разработке.anyОпыт тс, учись потихоньку около месяца, реально можно воевать,
Группа WeChat
Спасибо за прочтение, если есть вопросы, то можете вступить в группу🚀, в группе их многоинтересныйДавайте учиться и расти вместе!
Вы можете добавить меня в WeChat, и я приглашу вас в группу WeChat (из-за ограничения Tencent в 100 человек в группах WeChat после более чем 100 человек я должен вас пригласить)