npm init
sudo npm install -g typescript
npm install npm@latest -g
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
Перевірка версії.
node -v
function greeter(person) {
return "Hello, " + person;
}
greeter('Dima')
Компіляція.
tsc app.ts
Або вказуючи повний шлях.
./node_modules/.bin/tsc
Початкова сторінка
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="app.js"></script>
</body>
</html>
Додавання веб-сервера.
npm install lite-server --save
Іноді виникає помилка permission denied, mkdir ‘/home/user/.npm для усунення видаліть папку .npm
./node_modules/.bin/lite-server
У цьому файлі визначаються:
Вхідна (коренева) директорія проекту;
вихідна директорія;
Опції компілятора;
Визначаються які файли включати та вимикати з компіляції.
{ “compilerOptions”: { “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “module”: “commonjs”, “target”: “es2015”, “outDir”: “built”, “rootDir”: “src” } }
якщо ви вказуєте файл для компіляції явно, то конфігураційний файл ігнорується!
Список усіх налаштувань typescript
Перенесемо app.ts файл до папки src.
tsc -w
{
"compilerOptions": {
....
},
"include": [
"**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]}
У цьому прийнято такі умовні позначення.
? - один будь-який символ, за винятком роздільника каталогів
**/ - всі підкаталоги
Повна версія
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"noImplicitAny": false,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*"
]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
function greeter(person: string) {
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);
src/app.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
function greeter(person: string): number {
return "Hello, " + person;
}
src/app.ts:8:1 - error TS2322: Type 'number' is not assignable to type 'string'.
Визначимо бібліотечну функцію src/lib/function.ts.
export function sayHello( name ) {
return `Hello {$name}`;
};
Імпортуємо її у головному модулі app.js.
import { sayHello } from './lib/function';
console.log(sayHello());
Отримуємо помилку у консолі.
app.js:2 Uncaught ReferenceError: exports is not defined
Это значит что js не знает конструкцию exports и для этого необходимо использовать загрузчик модулей, например SystemJS.
Установка.
npm install systemjs@0.19.22 --save
Шаблон
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title>
<script src="node_modules/systemjs/dist/system.js"></script>
</head>
<body>
<script>
SystemJS.config({
defaultJSExtensions: true
});
SystemJS.import('built/index.js');
</script>
</body>
</html>
При компіляції на льоту (всередині браузера без запуску TSC).
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
</head>
<body>
<script>
SystemJS.config({
transpiler: 'typescript',
packages: {
src: {
defaultExtension: 'ts'
}
}
});
SystemJS.import('src/index.ts');
</script>
</body>
</html>