Tag Archives: typescript

Typescript error “Cannot write file xxx because it would overwrite input file

The reason for this problem is that allowjs is turned on.

Because allowjs allows typescript compiler to compile JS. The compiled output file, namely XXX. JS, is the same as the source file.

So an error like “input file will be overwritten” will be reported.

In fact, we use third-party packaging tools such as webpack for our daily development. The compilation output is the responsibility of TS loader, so it is not necessary to care about the output of each TS file.

In this case, noemits can be set to true true

No Emit –
Do not emit compiler output files like JavaScript source code, source-maps or declarations.
This makes room for another tool like Babel, or swc to handle converting the TypeScript file to a file which can run inside a JavaScript environment.
You can then use TypeScript as a tool for providing editor integration, and as a source code type-checker.

In addition, you can specify the output directory to avoid conflicts.

For more details, please refer to https://github.com/kulshekhar/ts-jest/issues/1471

The difference between problem and observables

There is a discussion on stackoverflow: what is the difference between problems and observables?

A useful blog: angular2 observables, HTTP, and separating services and components

An article on the official website of angular: observables compared to other technologies

The difference between observable and promise:

Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result.

Observable is declarative, and calculation is not triggered until subscription. This is very different from promise — promise is executed immediately after it is created.

Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time.

Observable provides multiple values, while promises can only provide a single value.

Observables differentiate between chaining and subscription. Promises only have .then() clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed.

Observable can be combined into complex transformation recipes with the help of rich operators in rxjs, which is convenient for reuse in application, while promise has only one then operation.

Observables subscribe() is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling.

Property ‘style’ does not exist on type ‘element‘

Property ‘style’ does not exist on type ‘element’ property does not exist on type ‘element’
Reason: This is caused by TypeScript type checking, which requires a type assertion in front of the querySelector method.

let frameContainObj = document.getElementById("model_view_container")
let iframeObj= <HTMLElement>frameContainObj.querySelector("#modelView");
iframeObj.style.height = document.documentElement.clientHeight* 0.65 + "px";

Extensions: When using QuerySelectorAll, the following scenario can be used:

let block = document.querySelectorAll(".block") as NodeListOf<HTMLElement>;

Tells the TypeScript compiler to pass this code by setting assertions

Definition of bracket type in typescript

The following figure defines a type Data that can contain a single field pointing to arbitrary Data:

https://stackoverflow.com/questions/58090665/typescript-what-is-the-type-of-the-object-name-string-string

    class aa{
      constructor(headers?: string | { [name: string]: string | string[]; }){
        
      }
    }


Meaning:
The headers type can be one of two types:

    string An object with a field pointing to a string or an array of strings. The name of the field doesn’t matter, there’s no restriction, as long as the field is a string.

More of Jerry’s original articles can be found at :

Quickly create a local typescript running environment.

Quickly create a native Typescript runtime environment.

npm init -f
npm -D i typescript@4
npm -D i @types/node@12 @types/vscode@1
npm -D i ts-node

npm -g i https://github.com/zhmhbest/AttachConfiguration
attach package.json "main='src/index.ts'"
attach package.json "scripts>build='tsc -p ./'"
attach package.json "scripts>watch='tsc -watch -p ./'"
attach package.json "scripts>start='ts-node src/index.ts'"

mkdir src
mkdir .vscode
touch ./tsconfig.json
touch ./src/index.ts
touch ./.vscode/launch.json

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "module": "CommonJS",
        "target": "ES2016",
        "lib": ["ES2016"],
        "rootDir": "./src",
        "outDir": "./out",
        "strict": true,
        "skipLibCheck": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "noUnusedParameters": true,
    },
    "include": ["./src/**/*"],
    "exclude": ["node_modules", "dist", "out"]
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug",
            "type": "node",
            "request": "launch",
            "args": [
                "${workspaceRoot}/src/index.ts"
            ],
            "runtimeArgs": [
                "--nolazy",
                "-r",
                "ts-node/register"
            ],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

index.ts

function sayHello() {
    console.log("Hello!");
}
sayHello();

Error ts1005: ‘;’ expected

function sayHello(person: string) {
  return 'Hello, ' + person;
}

let user = 'Tom'
console.log(sayHello(user));

hello.ts
tsc hello.ts
An error

E:\source\develop\typescript\typescriptstudy\hello.ts(5,5): error TS1005: ';' expected.

The actual test found that changing let to var did not report the error.
the error message doesn’t say the wrong semicolon, it says the compiler can’t recognize the let keyword.
Running tsc-v
found version 1.0.3.0
Then I learned online that Typescript supports let syntax in 1.4. Just open the Windows environment variable and see where TSC is using the command, if the version is wrong.
The following statement is found in path within the Windows environment variable:
C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0;
seems to be using the 1.0 that comes with the system.
Delete the environment variable here. Also delete Typescript 1.0 under the path. Let’s reinstall it

npm install -g typescript@latest

finally run:
tsc-v
found this time is not 1.0.3.0 but the latest installation 3.8.3. No problem.